<!DOCYPTE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            display: block;
            width: 100vw;
            height: 100vh;
        }
    </style>
    <insert-vscode-resource/>
</head>
<body>
    <svg id="container" preserveAspectRatio="none meet"></svg>
    <script>
        const map = markmap.Markmap.create("#container", null,
            { "t": "heading", "d": 1, "p": {}, "v": "Rendering, please wait..." });
        const vscode = acquireVsCodeApi();
        window.addEventListener("message", event => {
            const message = event.data;
            switch (message.command) {
                case "saveSvg": {
                    let svg = document.querySelectorAll("svg")[0];
                    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
                    vscode.postMessage({ command: "saveSvgData", html: svg.outerHTML });
                    break;
                }

                case "renderMarkdown": {
                    map.setData(markmap.transform(message.data));
                    break;
                }
            }
        });
    </script>
</body>
</html>